<!--督导信息管理-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="search-container" style="margin:0">
      <div class="search-container-item" style="margin-right:20px">
        <span style="color: #004ca7;margin-top: 5px;">学期：</span>
        <el-select
          v-model="xq"
          style="width: 100px"
          size="mini"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in xqList"
            :key="item.value"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <InputItem
        :name="'教员名称'"
        :value="teacherName"
        @input="
          (e) => {
            teacherName = e;
          }
        "
      ></InputItem>
   
      <InputItem
        :name="'课程名称'" teacherName courseName studentName
        :value="courseName"
        @input="
          (e) => {
            courseName = e;
          }
        "
      ></InputItem>

      <InputItem
        :name="'听课人名称'"
        :value="studentName"
        @input="
          (e) => {
            studentName = e;
          }
        "
      ></InputItem>

      <div class="search-button" style="margin: 3px 0;">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span @click="selectGroup">查询</span>
      </div>
       <div class="add-button"  @click="
                $router.push({
                  path: '/teacher/appraisal/addSupervisionInformation',
                })
              " style="width: 110px;margin-left: 20px;background: #ffefef;
    border: 1px solid #fa5339;
    border-radius: 6px;
    font-size:14px;
    color: #ff3819;
    margin:3px 20px">
<!--        <img src="../../../assets/assessment/huankao.png" alt=""/>-->
        <span>新增督导信息</span>
      </div>
    </div>
    <!-- <div class="search-container">
      <ButtonItem
        :name="'添加专项督导信息'"
        :link="'/admin/appraisal/addSpecial'"
        :icon="'el-icon-circle-plus-outline'"
        :buttonColor="'orange'"
      ></ButtonItem>

      <ButtonItem
        :name="'审核专项督导情况'"
        :link="''"
        :icon="'el-icon-circle-plus-outline'"
        :buttonColor="'orange'"
      ></ButtonItem>
    </div> -->
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          prop="kcmc"
          label="课程名称"
          width="156"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="skjy"
          label="上课教员"
          width="155"
          align="center"
        >
        </el-table-column>
     
        <el-table-column
          prop="skrq"
          label="上课时间"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="tkjc"
          label="听课节次"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cd"
          label="场所"
          width="155"
          align="center"
        > 
        </el-table-column>
        <el-table-column
          prop="pjdj"
          label="评价等级"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="pdfs"
          label="评价结果"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="tckr" label="听查课人"
          width="155" align="center">
        </el-table-column>
        <el-table-column
          prop="tjzt"
          label="评价状态"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="opreate" width="280" label="操作" align="center">
            <template slot-scope="scope">
            <div class="wrapper-buttons">
              <div class="search-button"> 
                <img src="../../../assets/assessment/icon-look.png" alt="" style="height:13px" />
                <span
                  @click="RouterTo('/teacher/appraisal/addSupervisionInformationsr',scope.row.id )">查看</span>
              </div>
              <div class="edit-button" >
                <img
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                />
                <span
                  @click="RouterTo('/teacher/appraisal/addSupervisionInformations',scope.row.id)">修改</span
                >
              </div>
              <div class="delet-button" @click="deletGroup(scope.row.id)">
                <img
                   src="../../../assets/assessment/删除.png"
                   style="width: 13px;height: 14px;"
                  alt=""
                />
                <span>删除</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <!-- <span>导出Excel</span> -->
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="督导信息管理.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="pagination-block">
        <el-pagination
        style="padding:0;margin-top:-8px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        </el-pagination>
      </div>
    </div>
     <el-dialog
      title="提示"
      :visible.sync="showMessageDialog"
      width="583px"
      style=" height:520px"
      class="message-container"
    >
      <div class="message-text">
        
        <div>确定要删除吗？</div>
      </div>
      <span slot="footer" class="dialog-footer">
<!--      dialogClickconfirm('Message')  -->
        <button class="green" @click="pjalllerdelete()">确 定</button>
      </span>
      <span slot="footer" class="dialog-footer" style="margin-left:60px" >
        <button class="yellow" @click="showMessageDialog = false">取 消</button>
      </span>

    </el-dialog>
  </div>
  
</template>

<script>
import {selectGroup,deletGroup} from "@/api/teacher/admin";
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import {
  reqGetXqList,
 
} from "../../../api/classHoursAddList/addList";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      total:"",
      size:10,
      current:"1",
      showMessageDialog:false,
      xq: "",
      xqList: [],
      teacherName: "",
      className: "",
      courseName: "",
      studentName: "",
      tableData: [],
      jsonFields: {
        课程名称: "kcmc",
        上课教员: "skjy",
        上课时间: "skrq",
        听课节次: "tkjc",
        场所: "cd",
        评价等级: "pjdj",
        评价结果: "pdfs",
        听查客人: "tckr",
        评价状态: "tjzt",
        操作: "opreate"
      },
      id:'',
    };
  },
  mounted() {
    this.getXqList();
  },
  methods: {
     // 获取学期院历列表
    getXqList() {
      reqGetXqList().then(res=>{
        if (res.data.code == 200) {
          this.xqList = res.data.data;
          this.xq = res.data.data.length > 0 ? res.data.data[0].xqmc : '';
          this.selectGroup(); 
        }
      });
    },
    RouterTo(path, id) {
      console.log("================" + id)
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      })
    },
      //按条件查询
    selectGroup(){
      console.log(this.xq)
      let obj = {}
       obj.supervisionInfoVO ={
          term: this.xq,
          skjy: this.teacherName,  
          kcmc: this.courseName,
          tckr: this.studentName
       },
       obj.query={
          size :this.size,
          current : this.current 
       }
       return new Promise(resolve => {
         selectGroup(obj).then((res) => {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
        })
      })
    },
    handleCurrentChange(val) {
      this.current = val;
      this.selectGroup();
    },
    handleSizeChange(val) {
      this.size = val;
      this.selectGroup();
    },
    deletGroup(id){
      this.id = id;
      this.showMessageDialog = true;
    },
    pjalllerdelete(){
      deletGroup(this.id).then(res=>{
        if(res.data.code == 200) {
          this.showMessageDialog = false;
          this.selectGroup();
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  // margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 17px;
    height: 17px;
    margin-right: 4px;
  }
}
 .edit-button {
    .search-button;
    background: #dfffef;
    border: 1px solid #02c86c;

    > span {
      color: #02c86c;
    }
  }
  .delet-button {
    .search-button;
   background: #ffefef;
    border: 1px solid #ff3819;

    > span {
       color: #fb563c;
    }
  }
.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-buttons {
    display: flex;
       flex-direction: row;
       justify-content: space-between;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
.message-text{
      padding: 57px 0 63px 0;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
    text-align: center;
}
</style>
